<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>案件分布</title>
    <meta name="description" content="Dashboard"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="shortcut icon" href="favicon.ico">
    <#include '/inc/header.ftl'/>

    <style>
        .margin-top-50{
            margin-top: 50px;
        }
    </style>
</head>

<body>
<div class="main-container container-fluid">
    <div class="page-container">
        <div class="page-header position-relative">
            <div class="header-title">
                <h3 data-rel=""> 城市概览
                </h3>
            </div>
        </div>

        <div class="row" style="height: 85%;">
            <div class="col-md-8" style="height: 100%;">
                <div id="main" style="width: 575px;height:100%;margin:0 auto"></div>
            </div>

            <div class="col-md-4">
                <div class="input-group" style="width: 300px">
                    <input type="hidden" id="searchId" value="">
                    <input type="text" placeholder="搜区域" name="search" class="form-control input-md search-input">
                    <div class="proposal-box">
                        <ul class="proposal-list">

                        </ul>
                    </div>
                    <div class="input-group-btn">
                        <button class="btn btn-md btn-primary search-btn">
                            搜索
                        </button>
                    </div>
                </div>


                <p class="margin-top-50"><button class="btn btn-danger btn-lg" role="button">案件数量：${caseNum!0}</button></p>
                <p class="margin-top-50"><button class="btn btn-success btn-lg" role="button">线索数量：${clueNum!0}</button></p>
                <p class="margin-top-50"><button class="btn btn-primary btn-lg" role="button"> 人员数量：${userNum!0}</button></p>
            </div>
        </div>
    </div>
</div>
<#include '/inc/footer.ftl'/>
<script src="js/echarts.min.js"></script>
<script src="js/json.js"></script>
<script>
    function randomData() {
        return Math.round(Math.random() * 1000);
    }

    $(document).ready(function () {
        var option = {
            visualMap: {
                min: 0,
                max: 100,
                left: 'right',
                top: 'bottom',
                text: ['高', '低'], // 文本，默认为数值文本
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
                ,
            },
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    // 使用函数形式的formatter，可以更方便地处理数据和格式化字符串
                    return params.data.name + '<br/>' +
                            '案件 : ' + params.data.value + '<br/>' +
                            '线索 : ' + params.data.clue + '<br/>' +
                            '人员 : ' + params.data.user + '<br/>'
                }
            },
            series: [{
                name: '行政区',
                type: 'map',
                mapType: 'wlmq',
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                label: {
                    show: true
                },
                data: ${areaJson!''}

            }]
        };


        echarts.registerMap('wlmq', json);
        var chart = echarts.init(document.getElementById('main'));
        chart.setOption(option);


        chart.on('click', function (params) {
            // params 是一个包含点击事件相关信息的对象
            // params.name 是被点击地区的名称
            // params.value 是被点击地区的数据值（如果有的话）
            // params.componentType 表明点击的是哪种类型的组件，对于地图来说，通常是 'series'
            // params.seriesType 表明点击的是哪种类型的系列，对于地图来说，是 'map'
            // ... 还可能包含其他有用的信息
            // localStorage.setItem("p_from", "d")
            location.href = "/wb/map/graph/preview?area=" + params.name;


            // newTab("/wb/map/graph/preview?area=" + params.name, '车辆管理详情')
            // 在这里你可以根据 params 中的信息执行你需要的操作
            // 例如，跳转到新的页面，显示详细信息，或者触发其他逻辑
        });

        $("body").on("click", ".search-btn", function(event){
            var graphId = $("#searchId").val();
            if (!graphId){
                parent.layer.alert("请选择正确的图形名称!");
                $(".search-input").val("");
                return;
            }
            location.href = "/wb/map/graph/search?graphId=" + graphId;

        });


        $("body").on("click", ".proposal", function(event){
            $(".search-input").val($(event.target).text());
            $("#searchId").val($(event.target).attr("id"));
            $(".proposal-list").html("");
        });

        $(".search-input").on("keyup", function(){
            //查询
            $.ajax({
                contentType: 'application/json;charset=utf-8', //设置请求头信息
                url: '/wb/map/graph/queryByParams?name=' + $(".search-input").val(),
                type: 'POST',
                data: {

                },//数据，这里使用的是Json格式进行传输
                dataType: 'JSON',
                success: function (data) {
                    if (data.status == "200") {
                        var graphs = data.data;
                        var html = "";
                        if (graphs){
                            for (var i = 0; i < graphs.length; i++) {
                                html += '<li class="proposal" id=' + graphs[i].id + '>' + graphs[i].name +'</li>';
                            }
                        }
                        $(".proposal-list").html(html);
                        $("#searchId").val("");
                    } else {
                        parent.layer.alert("发生异常!");
                    }
                }
            });
        });

    });

    //select2  常规公用封装

</script>
</body>
</html>